@import "../../fontwr/iconfont.css";
html {
  font-family: sans-serif, "Helvetica Neue", Helvetica, sans-serif;

}
html,
body,
header,
section,
footer,
div,
ul,
ol,
li,
img,
a,
span,
em,
del,
legend,
center,
strong,
var,
fieldset,
form,
label,
dl,
dt,
dd,
cite,
input,
hr,
time,
mark,
code,
figcaption,
figure,
textarea,
h1,
h2,
h3,
h4,
h5,
h6,
p {
  margin: 0;
  border: 0;
  padding: 0;
  font-style: normal;
}
body {
  line-height: 1.5;
  font-size: 0.32rem;
  color: #212121;
  outline: 0;
}

ul,
li {
  list-style: none;
}
a {
  color: #0062cc;
  text-decoration: none;
  background-color: transparent;
}
textarea {
  overflow: hidden;
  resize: none;
}
.icon {
  width: 1em;
  height: 1em;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}


.bottom-text {
  width: 100%;
  padding: 0;
  margin: 1.3rem auto;
  text-align: center;
  color: #999;
  font-size: .75rem;
}
html{
  background: #f9f9f9;
}
header {
  overflow: hidden;
  position: relative;
  width: 100%;
  height:4.79rem;
  text-align: center;
  font-size: 0.34rem;
  background:url(../../image/user/banner.png) no-repeat center/100%;
  color: #fcfcfc;
}
header .headbox {
  width: 100%;
  height: 1rem;
  box-sizing: border-box;
  display: flex;
  justify-content: space-between;;
  align-items: center;
  margin-top: .45rem;
}
header .headbox .icon-left {
  width: 1rem;
  height: 100%;
  line-height: 1rem;
  font-size: 0.4rem;
}
header .headbox .empty {
  width: .8rem;
  height: 100%;
}
header .headbox .text {
  letter-spacing: .04rem;
  font-size: 0.34rem;
}
header  .user{
  position: absolute;
  top:50%;
  left:50%;
  transform:translateX(-50%) translateY(-20%);
  width: 1.96rem;
  height: 1.96rem;
  box-sizing: border-box;
  border-radius: 50%;
  background: url('../../image/user/user.png') no-repeat center/cover;
}
.main {
  height: 100%;
}
.main .inputbox {
  height: 2.6rem;
  width: 100%;
  padding-top: 0.6rem;
}
.main .inputbox .cel {
  box-sizing: border-box;
  margin-left: 0.4rem;
  margin-right: 0.4rem;
  width:6.57rem;
  height: .88rem;
  background: #fff;
  border: 0.01rem solid #eee;
  border-radius: 0.44rem;
  display: flex;
  justify-content: space-between;
  padding: 0 .56rem;
  align-items: center;
}
.main .inputbox .cel~.cel{
  margin-top:.6rem;
}
.main .inputbox .cel .iconfont {
  width: 1.2rem;
  color: #666;
  text-align: center;
  line-height: 0.92rem;
}
.main .inputbox .cel input {
  -webkit-appearance: none;
  -moz-appearance: none;
  flex: 1;
  margin-right: 0.4rem;
  background: rgba(0, 0, 0, 0);
  font-size: .28rem;
  outline: none;
  color: #999;
}
.main .inputbox .cel input[type="text"]:focus {
  color: #333;
}
.main .inputbox .phonenum {
  margin-bottom: .2rem;
}
.main .btnbox {
  height: 3.2rem;
  width: 100%;
}
.main .btnbox .login {
  box-sizing: border-box;
  margin-left: 0.4rem;
  margin-right: 0.4rem;
  width:6.57rem;
  height: .88rem;
  background:linear-gradient(0deg,rgba(232,179,120,1) 0%,rgba(242,204,160,1) 100%);
  border-radius: 0.44rem;
  text-align: center;
  line-height: .88rem;
  color: #1d1d1d;
  font-size: .34rem;
}
.main .btnbox .other {
  text-align: center;
  font-size: .28rem;
  color:#666;
  margin:.6rem 0;
}
.main .btnbox .other span{
  color:#EAB981;
}
.icon{
  width:.4rem;
  height:.4rem;
  box-sizing: border-box;
  margin-right: .37rem;
}
.icon-phone{
  background: url('../../image/user/phone.png') no-repeat center/72%;
}
.icon-mima{
  background: url('../../image/user/pwd.png') no-repeat center/86%;
}
@keyframes danceinput {
  0% {
    transform: translateX(0);
  }
  25% {
    transform: translateX(-0.2rem);
  }
  50% {
    transform: translateX(0);
  }
  75% {
    transform: translateX(0.2rem);
  }
  100% {
    transform: translateX(0);
  }
}
@-webkit-keyframes danceinput {
  0% {
    -webkit-transform: translateX(0);
  }
  25% {
    -webkit-transform: translateX(-0.2rem);
  }
  50% {
    -webkit-transform: translateX(0);
  }
  75% {
    -webkit-transform: translateX(0.2rem);
  }
  100% {
    -webkit-transform: translateX(0);
  }
}
